<template>
  <div class="api-management">
    <!-- 页面标题区域 -->
    <div class="page-header glass-effect">
      <div class="header-content">
        <h1>我的 API</h1>
        <div class="header-actions">
        </div>
      </div>
      
      <!-- 统计卡片区域 -->
      <div class="stats-cards">
        <div class="stat-card glass-effect">
          <div class="stat-icon">
            <i class="fas fa-cloud-upload-alt"></i>
          </div>
          <div class="stat-info">
            <span class="stat-value">{{ stats.published }}</span>
            <span class="stat-label">已发布</span>
          </div>
        </div>
        
        <div class="stat-card glass-effect">
          <div class="stat-icon">
            <i class="fas fa-pause-circle"></i>
          </div>
          <div class="stat-info">
            <span class="stat-value">{{ stats.offline }}</span>
            <span class="stat-label">已下架</span>
          </div>
        </div>
        
        <div class="stat-card glass-effect">
          <div class="stat-icon">
            <i class="fas fa-clock"></i>
          </div>
          <div class="stat-info">
            <span class="stat-value">{{ stats.draft }}</span>
            <span class="stat-label">草稿</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索和筛选区域 -->
    <div class="filter-section glass-effect">
      <el-input
        v-model="searchQuery"
        placeholder="搜索接口名称或描述"
        prefix-icon="el-icon-search"
        clearable
      />
      <el-select v-model="statusFilter" placeholder="状态筛选">
        <el-option label="全部" value="" />
        <el-option label="已发布" value="published" />
        <el-option label="已下架" value="offline" />
        <el-option label="草稿" value="draft" />
      </el-select>
    </div>

    <!-- API 列表区域 -->
    <div class="api-list">
      <el-card 
        v-for="api in filteredApis" 
        :key="api.apiid" 
        class="api-card glass-effect"
        :class="{
          'api-card-error': api.status === 0,
          'api-card-upgrading': api.status === 2,
          'api-card-review-failed': api.status === -3
        }"
      >
        <div class="api-header">
          <div class="api-title">
            <h3>{{ api.name }}</h3>
            <el-tag 
              :type="getStatusType(api.status)"
              effect="dark"
            >
              {{ getStatusLabel(api.status) }}
            </el-tag>
          </div>
          <div class="api-actions">
            <el-tooltip content="编辑" placement="top">
              <el-button 
                type="primary" 
                icon="el-icon-edit" 
                circle
                @click="editApi(api)"
              ></el-button>
            </el-tooltip>
            
            <!-- 审核失败状态显示查看原因和重新发布按钮 -->
            <template v-if="api.status === -3">
              <el-tooltip content="查看失败原因" placement="top">
                <el-button 
                  type="info" 
                  icon="el-icon-warning"
                  circle
                  @click="viewRejectReason(api)"
                ></el-button>
              </el-tooltip>
              
              <el-tooltip content="重新发布" placement="top">
                <el-button 
                  type="success" 
                  icon="el-icon-refresh"
                  circle
                  @click="reSubmitApi(api)"
                ></el-button>
              </el-tooltip>
            </template>
            
            <!-- 核成功状态显示发布按钮 -->
            <el-tooltip 
              content="发布配置" 
              placement="top"
              v-if="api.status === 5"
            >
              <el-button 
                type="success"
                icon="el-icon-upload2"
                circle
                @click="openPublishConfig(api)"
              ></el-button>
            </el-tooltip>
            
            <!-- 正常状态显示下架按钮 -->
            <el-tooltip 
              content="下架" 
              placement="top"
              v-if="api.status === 1"
            >
              <el-button 
                type="warning"
                icon="el-icon-download"
                circle
                @click="toggleApiStatus(api)"
              ></el-button>
            </el-tooltip>
          </div>
        </div>

        <div class="api-content">
          <div class="api-info">
            <p class="api-description">{{ api.description }}</p>
            <div class="api-meta">
              <span>
                <i class="fas fa-code"></i> {{ api.rqsType }}
              </span>
              <span>
                <i class="fas fa-link"></i> {{ api.apiurl }}
              </span>
              <span>
                <i class="fas fa-calendar-alt"></i> {{ api.updatetime || '暂无更新时间' }}
              </span>
            </div>
          </div>
          
          <div class="api-stats">
            <div class="stat-item">
              <span class="stat-label">调用次数</span>
              <span class="stat-value">{{ api.call || 0 }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">响应类型</span>
              <span class="stat-value">{{ api.resType }}</span>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- API 编辑对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="showDialog"
      width="50%"
      :close-on-click-modal="false"
    >
      <el-form :model="apiForm" ref="apiForm" :rules="apiRules">
        <el-form-item label="接口名称" prop="name">
          <el-input v-model="apiForm.name" />
        </el-form-item>
        <el-form-item label="请求方法" prop="rqsType">
          <el-select v-model="apiForm.rqsType">
            <el-option label="GET" value="GET" />
            <el-option label="POST" value="POST" />
            <el-option label="PUT" value="PUT" />
            <el-option label="DELETE" value="DELETE" />
          </el-select>
        </el-form-item>
        <el-form-item label="接口地址" prop="apiurl">
          <el-input v-model="apiForm.apiurl" />
        </el-form-item>
        <el-form-item label="测试地址" prop="testurl">
          <el-input v-model="apiForm.testurl" />
        </el-form-item>
        <el-form-item label="接口描述" prop="description">
          <el-input 
            type="textarea" 
            v-model="apiForm.description"
            :rows="3"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="submitApiForm">确定</el-button>
      </template>
    </el-dialog>

    <!-- 发布配置对话框 -->
    <el-dialog
      title="发布配置"
      :visible.sync="showPublishDialog"
      width="60%"
      :close-on-click-modal="false"
      custom-class="publish-dialog"
    >
      <div class="publish-loading" v-if="publishLoading">
        <div class="loading-steps">
          <div class="step" :class="{ active: publishStep >= 1, done: publishStep > 1 }">
            <div class="step-icon">
              <i class="el-icon-upload" v-if="publishStep > 1"></i>
              <div class="loading-spinner" v-else-if="publishStep === 1">
                <svg viewBox="0 0 50 50" class="circular">
                  <circle cx="25" cy="25" r="20" fill="none" class="path"></circle>
                </svg>
              </div>
              <i class="el-icon-circle-check" v-if="publishStep > 1"></i>
            </div>
            <div class="step-content">
              <h4>提交配置</h4>
              <p>正在向服务器提交配置信息</p>
            </div>
            <div class="step-line"></div>
          </div>

          <div class="step" :class="{ active: publishStep >= 2, done: publishStep > 2 }">
            <div class="step-icon">
              <i class="el-icon-refresh" v-if="publishStep > 2"></i>
              <div class="loading-spinner" v-else-if="publishStep === 2">
                <svg viewBox="0 0 50 50" class="circular">
                  <circle cx="25" cy="25" r="20" fill="none" class="path"></circle>
                </svg>
              </div>
              <i class="el-icon-circle-check" v-if="publishStep > 2"></i>
            </div>
            <div class="step-content">
              <h4>等待生效</h4>
              <p>服务器正在处理配置信息</p>
            </div>
            <div class="step-line"></div>
          </div>

          <div class="step" :class="{ active: publishStep >= 3, done: publishStep === 3 }">
            <div class="step-icon">
              <i class="el-icon-circle-check" v-if="publishStep === 3"></i>
              <div class="loading-spinner" v-else-if="publishStep === 3">
                <svg viewBox="0 0 50 50" class="circular">
                  <circle cx="25" cy="25" r="20" fill="none" class="path"></circle>
                </svg>
              </div>
            </div>
            <div class="step-content">
              <h4>配置完成</h4>
              <p>新的配置已经生效</p>
            </div>
          </div>
        </div>
      </div>

      <el-form 
        :model="publishForm" 
        ref="publishForm" 
        :rules="parameterRules" 
        label-width="100px"
        v-loading="publishLoading"
        element-loading-text="请稍候..."
        element-loading-spinner="el-icon-loading"
      >
        <div class="publish-section">
          <h3><i class="el-icon-upload"></i> 发布策略</h3>
          
          <div class="deploy-type-select">
            <el-radio v-model="publishForm.deployType" label="gray">
              <div class="deploy-type-content">
                <div class="deploy-type-title">灰度发布</div>
                <div class="deploy-type-desc">根据API调用次数阈值控制访问量</div>
              </div>
            </el-radio>
            <el-radio v-model="publishForm.deployType" label="full">
              <div class="deploy-type-content">
                <div class="deploy-type-title">全量发布</div>
                <div class="deploy-type-desc">开放所有用户访问</div>
              </div>
            </el-radio>
          </div>

          <div v-if="publishForm.deployType === 'gray'" class="gray-scale-section">
            <div class="gray-scale-title">调用次数阈值设置</div>
            <el-slider
              v-model="publishForm.grayScale"
              :step="100"
              :min="100"
              :max="10000"
              :marks="{
                100: '100次',
                2500: '2500次',
                5000: '5000次',
                7500: '7500次',
                10000: '10000次'
              }"
            >
            </el-slider>
            <div class="gray-scale-tip">
              当前设置: API调用次数达到 {{ publishForm.grayScale }} 次后自动停止
            </div>
          </div>
        </div>

        <div class="publish-section">
          <h3><i class="el-icon-setting"></i> 参数配置</h3>
          <div class="parameters-table">
            <div class="parameter-header">
              <el-button type="primary" size="small" @click="addParameter">
                <i class="el-icon-plus"></i> 添加参数
              </el-button>
            </div>
            <el-table :data="publishForm.parameters" border stripe>
              <el-table-column label="参数名称" prop="name">
                <template #default="scope">
                  <el-input v-model="scope.row.name" placeholder="请输入参数名称"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="参数说明" prop="description">
                <template #default="scope">
                  <el-input v-model="scope.row.description" placeholder="请输入参数说明"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="参数类型" prop="type" width="120">
                <template #default="scope">
                  <el-select v-model="scope.row.type" placeholder="选择类型">
                    <el-option label="字符串" value="string"></el-option>
                    <el-option label="数字" value="number"></el-option>
                    <el-option label="布尔值" value="boolean"></el-option>
                    <el-option label="对象" value="object"></el-option>
                    <el-option label="数组" value="array"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="是否必填" width="80" align="center">
                <template #default="scope">
                  <el-switch v-model="scope.row.required"></el-switch>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="80" align="center">
                <template #default="scope">
                  <el-button 
                    type="danger" 
                    icon="el-icon-delete" 
                    circle
                    size="mini"
                    @click="removeParameter(scope.$index)"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-form>
      
      <template #footer>
        <el-button @click="showPublishDialog = false" :disabled="publishLoading">取消</el-button>
        <el-button 
          type="primary" 
          @click="submitPublishConfig"
          :loading="publishLoading"
          :disabled="publishLoading"
        >
          <i class="el-icon-upload2"></i> 确认发布
        </el-button>
      </template>
    </el-dialog>

    <!-- 添加审核失败原因对话框 -->
    <el-dialog
      title="审核失败原因"
      :visible.sync="showRejectReasonDialog"
      width="40%"
      custom-class="reject-reason-dialog"
    >
      <div class="reject-reason-content">
        <i class="el-icon-warning-outline reject-icon"></i>
        <div class="reason-text">{{ currentRejectReason }}</div>
      </div>
      <template #footer>
        <el-button type="primary" @click="showRejectReasonDialog = false">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';


export default {
  name: 'MyApi',
  data() {
    return {
      // 统计数据
      stats: {
        published: 0,
        offline: 0,
        draft: 0
      },
      // 搜索和筛选
      searchQuery: '',
      statusFilter: '',
      // API 列表
      apis: [],
      // 对话框控制
      showDialog: false,
      dialogType: 'create', // 'create' 或 'edit'
      apiForm: {
        name: '',
        rqsType: 'GET',
        apiurl: '',
        testurl: '',
        description: '',
        resType: 'JSON',
        note: '无',
        isneedtoken: 0
      },
      // 表单验证规则
      apiRules: {
        name: [
          { required: true, message: '请输入接口名称', trigger: 'blur' }
        ],
        apiurl: [
          { required: true, message: '请输入接口地址', trigger: 'blur' }
        ],
        testurl: [
          { required: true, message: '请输入测试地址', trigger: 'blur' }
        ]
      },
      showPublishDialog: false,
      publishForm: {
        deployType: 'gray',
        grayScale: 1000,
        parameters: []
      },
      currentApi: null,
      parameterRules: {
        name: [{ required: true, message: '请输入参数名称', trigger: 'blur' }],
        description: [{ required: true, message: '请输入参数说明', trigger: 'blur' }]
      },
      showRejectReasonDialog: false,
      currentRejectReason: '',
      publishLoading: false,
      publishStep: 0, // 0: 未开始, 1: 提交配置, 2: 等待生效, 3: 已生效
      baseUrl: config.baseUrl
    }
  },
  computed: {
    dialogTitle() {
      return this.dialogType === 'create' ? '创建新接口' : '编辑接口'
    },
    filteredApis() {
      return this.apis.filter(api => {
        const matchQuery = api.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
                         api.description.toLowerCase().includes(this.searchQuery.toLowerCase())
        const matchStatus = !this.statusFilter || api.status === this.statusFilter
        return matchQuery && matchStatus
      })
    }
  },
  methods: {
    // 获取API列表
    async fetchApis() {
      try {
        const response = await axios.get('/api/system/api/author/getApiList')
        this.apis = response.data.data
        this.updateStats()
      } catch (error) {
        this.$message.error('获取接口列表失败')
      }
    },
    // 更新统计数据
    updateStats() {
      this.stats.published = this.apis.filter(api => api.status === 1).length
      this.stats.offline = this.apis.filter(api => api.status === 0).length
      this.stats.draft = this.apis.filter(api => ['-1', '-2'].includes(api.status.toString())).length
    },
    // 创建新接口
    createApi() {
      this.dialogType = 'create'
      this.apiForm = {
        name: '',
        rqsType: 'GET',
        apiurl: '',
        testurl: '',
        description: '',
        resType: 'JSON',
        note: '无',
        isneedtoken: 0
      }
      this.showDialog = true
    },
    // 编辑接口
    editApi(api) {
      this.dialogType = 'edit'
      this.apiForm = { ...api }
      this.showDialog = true
    },
    // 切换接口状态
    async toggleApiStatus(api) {
      // 只有待发布状态可以发布为正常状态
      const canPublish = api.status === -1
      // 只有正常状态可以下架为异常状态
      const canTakeDown = api.status === 1
      
      if (!canPublish && !canTakeDown) {
        this.$message.warning('当前状态不允许进行此操作')
        return
      }
      
      const newStatus = canPublish ? 1 : 0
      const actionText = canPublish ? '发布' : '下架'
      
      try {
        await this.$confirm(`确定要${actionText}该接口吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        await this.$axios.put(`/api/apis/${api.apiid}/status`, { status: newStatus })
        api.status = newStatus
        this.updateStats()
        this.$message.success(`${actionText}成功`)
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error(`${actionText}失败`)
        }
      }
    },
    // 提交表单
    async submitApiForm() {
      try {
        await this.$refs.apiForm.validate()
        
        if (this.dialogType === 'create') {
          await this.$axios.post('/api/apis', this.apiForm)
          this.$message.success('创建成功')
        } else {
          await this.$axios.put(`/api/apis/${this.apiForm.id}`, this.apiForm)
          this.$message.success('更新成功')
        }
        
        this.showDialog = false
        this.fetchApis()
      } catch (error) {
        this.$message.error('提交失败')
      }
    },
    // 格式化日期
    formatDate(date) {
      return new Date(date).toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      })
    },
    // 获取状态类型
    getStatusType(status) {
      const typeMap = {
        '0': 'danger',
        '1': 'success',
        '2': 'warning',
        '5': 'success',
        '-1': 'info',
        '-2': 'warning',
        '-3': 'danger'
      }
      return typeMap[status]
    },
    // 获取状态标签
    getStatusLabel(status) {
      const labelMap = {
        '0': '异常',
        '1': '正常',
        '2': '升级中',
        '5': '审核成功',
        '-1': '待发布',
        '-2': '待审核',
        '-3': '审核失败'
      }
      return labelMap[status] || '未知状态'
    },
    // 打开发布配置对话框
    openPublishConfig(api) {
      this.currentApi = api
      this.publishForm = {
        deployType: 'gray',
        grayScale: 1000,
        parameters: [
          {
            name: '',
            description: '',
            required: true,
            type: 'string'
          }
        ]
      }
      this.showPublishDialog = true
    },
    // 添加参数
    addParameter() {
      this.publishForm.parameters.push({
        name: '',
        description: '',
        required: true,
        type: 'string'
      })
    },
    // 删除参数
    removeParameter(index) {
      this.publishForm.parameters.splice(index, 1)
    },
    // 提交发布配置
    async submitPublishConfig() {
      try {
        await this.$refs.publishForm.validate();
        

        this.publishLoading = true;
        this.publishStep = 1;

        const publishData = {
          apiId: this.currentApi.apiid,
          deployType: this.publishForm.deployType,
          grayScale: this.publishForm.deployType === 'gray' ? this.publishForm.grayScale : 10000,
          parameters: this.publishForm.parameters.map(param => ({
            name: param.name,
            description: param.description,
            required: param.required,
            type: param.type
          }))
        };

        // 显示加载提示
        const loadingInstance = this.$loading({
          lock: true,
          text: '正在提交配置...',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.8)'
        });

        // 提交配置
        const res = await axios.post('/api/system/publish/submitParms', publishData);
        
        if (res.data.code === 200) {
          this.publishStep = 2;
          loadingInstance.text = '等待配置生效...';
          
          // 等待2秒模拟配置生效过程
          await new Promise(resolve => setTimeout(resolve, 2000));
          
          this.publishStep = 3;
          loadingInstance.text = '配置已生效';
          
          // 再等待1秒后关闭
          await new Promise(resolve => setTimeout(resolve, 1000));
          
          loadingInstance.close();
          this.showPublishDialog = false;
          this.$message.success('发布配置成功');
          this.fetchApis();
        } else {
          loadingInstance.close();
          this.$message.error(res.data.msg || '发布配置失败');
        }
      } catch (error) {
        this.$message.error('发布配置失败');
      } finally {
        this.publishLoading = false;
        this.publishStep = 0;
      }
    },
    // 查看审核失败原因
    async viewRejectReason(api) {
      await axios.get(`/api/system/api/apiReject/${api.apiid}`).then(res => {
        this.currentRejectReason = res.data.data.reject || '未提供具体原因'
        this.showRejectReasonDialog = true
      })
    },
    // 重新发布
    async reSubmitApi(api) {
      try {
        await this.$axios.post(`/api/apis/resubmit/${api.apiid}`)
        this.$message.success('重新提交成功，请等待审核')
        this.fetchApis()
      } catch (error) {
        this.$message.error('重新提交失败')
      }
    },
    
    // 修改相关方法中的地址获取
    handleNodeClick(data) {
      this.currentNode = data;
      this.apiAddress = this.getApiAddress(data.apiid);
    }
  },
  mounted() {
    this.fetchApis()
  }
}
</script>

<style scoped>
.api-management {
  padding: 20px;
  background: #f0f2f5;
  min-height: 100vh;
}

/* 页面标题区域 */
.page-header {
  padding: 24px;
  border-radius: 12px;
  margin-bottom: 24px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.header-content h1 {
  margin: 0;
  font-size: 24px;
  color: #1a237e;
}

/* 统计卡片 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(64, 158, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.stat-icon i {
  font-size: 24px;
  color: #409EFF;
}

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #1a237e;
}

.stat-label {
  color: #666;
  margin-top: 4px;
}

/* 搜索和筛选区域 */
.filter-section {
  display: flex;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 24px;
}

/* API 卡片列表 */
.api-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 20px;
}

.api-card {
  border-radius: 12px;
  transition: all 0.3s ease;
}

.api-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.api-card-error {
  border-left: 4px solid #F56C6C;
  opacity: 0.8;
}

.api-card-upgrading {
  border-left: 4px solid #E6A23C;
}

.api-card-review-failed {
  border-left: 4px solid #F56C6C;
  opacity: 0.7;
}

.api-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.api-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.api-title h3 {
  margin: 0;
  font-size: 18px;
  color: #1a237e;
}

.api-actions {
  display: flex;
  gap: 8px;
}

.api-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.api-description {
  color: #666;
  margin: 0;
  line-height: 1.5;
}

.api-meta {
  display: flex;
  gap: 16px;
  color: #666;
  font-size: 14px;
}

.api-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.api-stats {
  display: flex;
  gap: 24px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 玻璃态效果 */
.glass-effect {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.publish-dialog {
  .publish-section {
    margin-bottom: 24px;
    
    h3 {
      font-size: 16px;
      color: #1a237e;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
      
      i {
        color: #409EFF;
      }
    }
  }

  .parameter-header {
    margin-bottom: 16px;
  }

  .parameters-table {
    margin-top: 16px;
  }

  .el-slider {
    width: 80%;
  }

  .el-radio-group {
    display: flex;
    gap: 16px;
  }

  .el-table {
    margin-top: 8px;
    
    .el-input {
      width: 100%;
    }
  }
}

.api-card-success {
  border-left: 4px solid #67C23A;
}

/* 修复发布类型选择样式 */
.deploy-type-select {
  margin-bottom: 20px;
  display: flex;
  gap: 20px;
  
  .el-radio {
    margin-right: 0;
    padding: 15px 20px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    transition: all 0.3s;
    flex: 1;
    
    &.is-checked {
      background-color: #ecf5ff;
      border-color: #409EFF;
      
      .deploy-type-title {
        color: #409EFF;
      }
      
      .deploy-type-desc {
        color: #606266;
      }
    }
    
    .deploy-type-content {
      margin-left: 25px;
    }
    
    .deploy-type-title {
      font-size: 16px;
      font-weight: 500;
      color: #303133;
      margin-bottom: 4px;
    }
    
    .deploy-type-desc {
      font-size: 12px;
      color: #909399;
    }
  }
}

.gray-scale-section {
  padding: 20px;
  background: #f5f7fa;
  border-radius: 4px;
  margin-top: 15px;
  
  .gray-scale-title {
    font-size: 14px;
    color: #606266;
    margin-bottom: 15px;
    font-weight: 500;
  }
  
  .el-slider {
    margin: 20px 0;
  }
  
  .gray-scale-tip {
    font-size: 13px;
    color: #909399;
    margin-top: 10px;
  }
}

.reject-reason-dialog {
  .reject-reason-content {
    padding: 20px;
    text-align: center;
    
    .reject-icon {
      font-size: 48px;
      color: #E6A23C;
      margin-bottom: 20px;
    }
    
    .reason-text {
      font-size: 14px;
      color: #606266;
      line-height: 1.6;
      white-space: pre-wrap;
      word-break: break-all;
      text-align: left;
      background: #fdf6ec;
      padding: 15px;
      border-radius: 4px;
      border-left: 4px solid #E6A23C;
    }
  }
}

.publish-steps {
  margin-bottom: 20px;
  padding: 20px;
  background: #f5f7fa;
  border-radius: 4px;
  display: flex;
  justify-content: space-around;
}

.step-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #909399;
  font-size: 14px;
}

.step-item.active {
  color: #409EFF;
}

.step-item.done {
  color: #67C23A;
}

.step-item i {
  font-size: 18px;
}

.el-loading-text {
  font-size: 14px;
  color: #409EFF;
}

/* Loading 效果样式 */
.publish-loading {
  position: relative;
  padding: 40px 20px;
  background: #f8faff;
  border-radius: 8px;
  margin-bottom: 20px;
}

.loading-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.step {
  position: relative;
  display: flex;
  align-items: flex-start;
  opacity: 0.5;
  transition: all 0.3s ease;
}

.step.active {
  opacity: 1;
}

.step-icon {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-right: 16px;
  z-index: 1;
}

.step.active .step-icon {
  background: #409EFF;
  color: #fff;
}

.step.done .step-icon {
  background: #67C23A;
  color: #fff;
}

.step-content {
  flex: 1;
}

.step-content h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  color: #303133;
}

.step-content p {
  margin: 0;
  font-size: 14px;
  color: #909399;
}

.step-line {
  position: absolute;
  left: 20px;
  top: 40px;
  bottom: -30px;
  width: 2px;
  background: #DCDFE6;
  z-index: 0;
}

.step:last-child .step-line {
  display: none;
}

.step.active .step-line {
  background: #409EFF;
}

.step.done .step-line {
  background: #67C23A;
}

/* Loading 动画 */
.loading-spinner {
  width: 24px;
  height: 24px;
}

.circular {
  animation: loading-rotate 2s linear infinite;
  height: 100%;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.path {
  stroke-dasharray: 90,150;
  stroke-dashoffset: 0;
  stroke-width: 4;
  stroke: #409EFF;
  stroke-linecap: round;
  animation: loading-dash 1.5s ease-in-out infinite;
}

.step.done .path {
  stroke: #67C23A;
}

@keyframes loading-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loading-dash {
  0% {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90,150;
    stroke-dashoffset: -40px;
  }
  100% {
    stroke-dasharray: 90,150;
    stroke-dashoffset: -120px;
  }
}

/* 步骤切换动画 */
.step {
  transform: translateY(20px);
  transition: all 0.3s ease;
}

.step.active {
  transform: translateY(0);
}

/* 图标动画 */
.step-icon i {
  transition: all 0.3s ease;
  transform: scale(0);
}

.step.active .step-icon i,
.step.done .step-icon i {
  transform: scale(1);
}

/* 完成状态动画 */
@keyframes checkmark {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.step.done .step-icon i {
  animation: checkmark 0.3s ease-in-out forwards;
}
</style>
